<template>
  <view class="video-player">
    <video
      ref="videoRef"
      class="video"
      :src="src"
      :poster="poster"
      controls
      :autoplay="autoplay"
      :loop="loop"
      :muted="muted"
      :show-center-play-btn="true"
      :show-fullscreen-btn="true"
      :show-play-btn="true"
      :show-progress="true"
      :show-mute-btn="true"
      :enable-progress-gesture="true"
      :show-casting-button="false"
    />
    <!-- 仅H5显示音量条 -->
    <view v-if="isH5" class="volume-bar">
      <input type="range" min="0" max="1" step="0.01" v-model="volume" @input="onVolumeChange" />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps({
  src: {
    type: String,
    required: true
  },
  poster: {
    type: String,
    default: ''
  },
  autoplay: {
    type: Boolean,
    default: false
  },
  loop: {
    type: Boolean,
    default: false
  },
  muted: {
    type: Boolean,
    default: false
  }
})

const volume = ref(1)
const isH5 = process.env.UNI_PLATFORM === 'h5'
const videoRef = ref(null)

function onVolumeChange(e) {
  if (isH5 && videoRef.value) {
    videoRef.value.volume = volume.value
  }
}
onMounted(() => {
  if (isH5 && videoRef.value) {
    videoRef.value.volume = volume.value
  }
})
</script>

<style lang="scss" scoped>
.video-player {
  width: 100%;
  height: 100%;
  .video {
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
    background: #000;
    object-fit: cover;
    display: block;
  }
}
.volume-bar {
  margin-top: 12rpx;
  width: 80%;
}
</style> 